<template>
	<view class="cateContainer">
	    <!-- 搜索组件 S-->
	    <mySearch id="mySearch" v-if="searchShow"></mySearch>
	    <!-- 搜索组件 E-->
		<!-- 容器区域 S -->
		<view class="boxContainer">
		    <!-- 左侧 S-->
		    <scroll-view class="nav" :style="'height:'+(wh-searchHeight)+'px'" scroll-y>
		        <view  @click="changeActive(item)" v-for="item in cateList" :key="item.id" :class="{active:item.id === activeCate.id}">{{item.name}}</view>
		    </scroll-view>
		    <!-- 左侧 E-->
			<!-- 右侧 S-->
			<view class="cate">
				<!-- 图片 -->
				<image class="cateImg" :src="activeCate.img_url"></u--image>
				<!-- 滚动商品容器 S-->
				<scroll-view  @scrolltolower="scrolltolower" scroll-y :style="'height:'+(wh-searchHeight-imgHeight)+'px'" class="listBox">
					<!-- 商品列表  list有数据，要渲染列表 -->
					<goodList :list="list" v-if="list.length"></goodList>
					<!-- list有数据，才会展示底部的 加载更多、加载中、没有了  -->
					<u-loadmore :status="status" v-if="list.length"></u-loadmore>
					<!-- 空的状态 -->
					<u-empty mode="list" marginTop="200rpx" v-if="list.length === 0"></u-empty>
				</scroll-view>
				<!-- 滚动商品容器 E-->
			</view>
			<!-- 右侧 E-->
		</view>
		<!-- 容器区域 E -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchShow:false,
				wh:0,			// 窗口高度
				searchHeight:0,  // 搜索框的高度
				imgHeight:0,     // 分类图片高度
				//定义分类数据和激活分类信息
				cateList:[],
				activeCate:{},
				count:0,  	    // 总数
				currentPage:1,  // 页码
				pageSize:8, 	// 每页数量
				list:[],		// 商品列表
				status:'loadmore',  // 数据状态    loadmore 加载更多	loading 加载中  nomore 没有了
			};
		},
		methods: {
			// 获取所有分类的方法
			async getAllCate() {
				let res = await uni.$http.get('/catalog/index')
				this.cateList = res.categoryList
				// 有长度！有分类信息才讨论商品列表和激活问题
				if(this.cateList.length){
					// 本地存储是否有分类ID，有说明是从首页点击分类图标或者分类文字过来的，否则说明是点击底部的tabBar过来的
					const cateId = uni.getStorageSync('cateId')
					if(cateId){
						// 找到分类ID对应的分类信息
						let row = this.cateList.find(item=>item.id === cateId)
						// 模拟一下左侧tab点击
						this.changeActive(row)
					}else{
						// 默认第一个激活  【点击底部的tabBar过来的】
						// 模拟一下左侧tab点击
						this.activeCate = this.cateList[0]
						this.changeActive(this.activeCate)
					}
				}
			},
			// 获取商品列表
			async getGoodList(){
				// 一开始要变成加载中
				this.status = 'loading'
				let res = await uni.$http.post('/catalog/currentlist',{
					id:this.activeCate.id,
					page:this.currentPage,
					size:this.pageSize
				}) 
				this.count = res.count
				this.list.push(...res.data)  // 移动端滚动加载更多，列表都是追加数据而不是赋值数据
				// 判断是否已经结束了
				if(this.list.length === this.count){
					// 没有了
					this.status = 'nomore'
				}else{
					// 还有
					this.status = 'loadmore'
				}
			},
			// 容器滚动到底部
			scrolltolower(){
				// 节流操作   // loadmore 加载更多	loading 加载中  nomore 没有了
				if(this.status !== 'loadmore') return
				// 加载更多的数据
				this.currentPage++
				this.getGoodList()
			},
			// 左侧点击
			changeActive(row){
				// 修改激活分类信息
				this.activeCate = row
				// 重置操作
				this.list = []
				this.status = 'loadmore'
				this.currentPage = 1
				this.count = 0
				// 拉取列表
				this.getGoodList()
			}
		},
		// 组件挂载完成
		mounted() {
			// 获取设备系统信息
			uni.getSystemInfo({
				success:res=>{
					this.wh = res.windowHeight  // 获取窗口的高度
				}
			})
			// 获取到选择器工具
			const query =  uni.createSelectorQuery().in(this)
			// 获取节点的高度
			query.select("#mySearch").boundingClientRect(data=>{
				this.searchHeight = data.height
			}).exec()
			query.select(".cateImg").boundingClientRect(data=>{
				this.imgHeight = data.height
			}).exec()
		},
		onShow() {
			this.searchShow = true
			// 获取所有分类
			this.getAllCate()
		},
		onHide(){
			this.searchShow = false
			// 移除本地的分类ID信息
			uni.removeStorageSync('cateId')
		}
	}
</script>

<style lang="scss">
.cateContainer{
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
	.boxContainer{
		display: flex;
		flex: 1;
		.nav{
			width: 180rpx;
			border-right: 1rpx solid #fafafa;
			height: 100%;
			view{
				line-height: 100rpx;
				text-align: center;
				color: #333;
				font-size: 30rpx
			}
			.active{
				color:#409eff;
				font-size: 32rpx
			}
		}
		.cate{
			flex: 1;
			padding:0 20rpx;
			height: 100%;
			flex-direction: column;
			.cateImg{
				width: 100%;
				height: 160rpx;
			}
			.listBox{
				flex:1;
			}
		}
	}
}
</style>
